<template>
    <div class="app-container">
        <Levelbar></Levelbar>
        <TableLayout form-title="">
            <div slot="form-title" class="table-title"></div>

            <el-form :model="query" ref="query" slot="form" label-width="75px">
                <el-row :gutter="41">
                    <el-col :span="8">
                        <el-form-item label="学校名称">
                            <!-- <el-select v-model="search.schoolName" filterable clearable remote reserve-keyword placeholder="请输入学校信息" :remote-method="remoteMethod" :loading="loading" style="width:100%">
                                <el-option v-for="item in schoolList" :key="item.pId" :label="item.sName" :value="item.sName">
                                </el-option>
                            </el-select> -->
                            <school v-model="search.schoolName" style="width:100%" @change='schoolChange'></school>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="月份">
                            <el-date-picker :editable="false" v-model="search.month" type="month" placeholder="选择月"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <div class="top-seach">
                        <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                    </div>
                </el-row>
                <!-- <div class="top-line">
                    <el-button type="primary" class="top-btn" @click="onSubmit">查询</el-button>
                </div> -->
            </el-form>
            <div class="table-title" slot="table-title">
            </div>
            <el-table :data="tableData" v-loading="loading" border @expand="btnChild">
                <el-table-column type="expand" align="center">
                    <template scope="props">
                        <el-table class='table-child' :data="tableChild[props.$index]">
                            <el-table-column label="" prop="" width="49"></el-table-column>
                            <el-table-column label="分类" align="center">
                                <template scope="scope">
                                    {{!scope.row.incrementName ? '--' : scope.row.incrementName}}
                                </template>
                            </el-table-column>
                            <el-table-column label="订单量（条）" align="center">
                                <template scope="scope">
                                    {{!scope.row.totalnum ? '--' : scope.row.totalnum}}
                                    <span v-if="scope.row.packOrderNum !== 0" class="mr-lf">(会员打包订单量：{{!scope.row.packOrderNum ? '--' : scope.row.packOrderNum}})</span>
                                </template>
                            </el-table-column>
                            <el-table-column label="销售额（元）" align="center">
                                <template scope="scope">
                                    {{!scope.row.totalmoney ? '--' : scope.row.totalmoney}}
                                    <span v-if="scope.row.packOrderMoney !== 0" class="mr-lf">(会员打包订单销售额：{{!scope.row.packOrderMoney ? '--' : scope.row.packOrderMoney}})</span>
                                </template>
                            </el-table-column>
                        </el-table>
                    </template>
                </el-table-column>
                <el-table-column label="学校" align="center">
                    <template scope="scope">
                        <span>{{scope.row.schoolName}}</span>
                    </template>
                </el-table-column>
                <el-table-column label="订单总量(条)" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.totalnum ? '--' : scope.row.totalnum}}</span> 
                    </template>
                </el-table-column>
                <el-table-column label="总销售额" align="center">
                    <template scope="scope">
                        <span>{{!scope.row.totalmoney ? '--' : scope.row.totalmoney}}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination-container" style="text-align:right">
                <el-pagination
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listQuery.total"
                    :current-page.sync="listQuery.page"
                    :page-sizes="config.pageSizes"
                    :page-size="config.pageSize"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
                </el-pagination>
            </div>
        </TableLayout>
    </div>
</template>

<script>
import Levelbar from '../../layout/Levelbar';
import TableLayout from 'components/TableLayout';
import { mapState, mapActions } from 'vuex';
import schoolChild from './schoolChild';
import school from 'components/SchoolClasss/school';
import {
  listSchoolStatistic,
  listCategoryBySchool
} from 'api/serviceManage';
export default {
    name: 'schoolStatistics',
    components: { Levelbar, TableLayout, schoolChild, school},
    data() {
        return {
            tableChild: [],
            loading: false,
            loadingChild: false,
            search: {
                schoolName: '',
                month: '',
                schoolId: ''
            }, // 查询条件
            schoolList: [], // 所有学校集合
            tableData: [], // 学校统计集合
            listQuery: {
        // 分页
                page: 1,
                total: 0
            },
            query: {}
        };
    },
    created() {
    // this.search.month = this.filterDate(new Date())
        this.queryData();
    },
    computed: {
        ...mapState({
            config: state => state.config.table
        })
    },
    methods: {
        ...mapActions(['ChangePageSize']),
        handleSizeChange(val) {
            this.listQuery.page = 1;
            this.ChangePageSize(val);
            this.queryData();
        },
        handleCurrentChange(val) {
            this.listQuery.page = val;
            this.queryData();
        },
        onSubmit() {
            this.queryData();
        },
        btnChild(row, expanded) {
            if (expanded) {
                this.loading = true;
                listCategoryBySchool(row.schoolId, this.filterDate(this.search.month)).then(data => {
                    this.loading = false;
                    let index = this.tableData.indexOf(row);
                    this.tableChild[index] = null;
                    this.tableChild.splice(index, 1, data.data.content)
                }).catch(Error => {
                    this.$message.error(Error);
                    this.loading = false;
                })
            }
        },
        filterDate(val) {
            if (val) {
                let month = val.getMonth() + 1 + '';
                return `${val.getFullYear()}-${month.length > 1 ? month : '0' + month}`;
            }
        },
        schoolChange(val) {
            this.search.schoolId = val;
        },
        queryData(val) {
            this.loading = true;
            listSchoolStatistic(
        this.search.schoolId,
        !this.filterDate(this.search.month)
          ? ''
          : this.filterDate(this.search.month),
        this.listQuery.page,
        this.config.pageSize
      ).then(data => {
          this.loading = false;
          this.tableData = [];
          this.listQuery.total = 0;
          if (data.data.content) {
              this.tableData = data.data.content.list;
              this.listQuery.total = data.data.content.pagination.total;
          } else {
              this.tableData = [];
              this.listQuery.total = 0;
          }
      }).catch(Error => {
          this.loading = false;
          this.$message.error(Error)
      })
        }
    }
};
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  padding: 20px 20px 10px;
  $bgcolor: #fff;
  .app-levelbar {
    height: 35px;
  }
}
.top-seach{
    float: right;
    padding-right: 20px;
    &::after {
        content: "\0020";
        display: block;
        height: 0;
        clear: both;
    }
}
.mr-lf{
    margin-left:15px;
}
</style>

